<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

    <table border="1" cellpadding="0" cellspacing="0" width="100%">
        <thead>
            <tr>
                <td>userId</td>
                <td>用户名</td>
                <td>密码</td>
            </tr>


        </thead>
        <tbody id="tbody">


        </tbody>

    </table>
    <button onclick="loadUserList()">加载数据</button>
    <button onclick="alert('异步')">测试</button>


    <script>
        function loadUserList() {
            //从js发起请求
            // http://127.0.0.1:8080/web/user_list

            let xhr = new XMLHttpRequest();


            let url = "http://127.0.0.1:8080/web/user_list"
            let async = true; //异步

            //在发送之前  设置一下  响应回来的时候  执行的代码     onready 函数
            xhr.onreadystatechange = (event) => {

                if (xhr.status == 200 && xhr.readyState == 4) {


                    //json 字符串的表示形式
                    let jsonStr = xhr.responseText;

                    let userArray = eval(jsonStr);


                    console.log(jsonStr);
                    console.log(userArray);
                    var tbody = document.querySelector("#tbody");
                    for (let i = 0; i < userArray.length; i++) {
                        let user = userArray[i];
                        console.log(user.userId);
                        console.log(user.username);
                        console.log(user.password);
                        let tr = document.createElement("tr");
                        tr.innerHTML = `
                            <td>${user.userId}</td>
                            <td>${user.username}</td>
                            <td>${user.password}</td>

                        `
                        tbody.appendChild(tr);
                    }


                }




            }



            //打开
            xhr.open("GET", url, async);

            //获取内容     ---
            xhr.send();


            //执行到此行的时候 ，请求 没有正常返回呢








        }
    </script>
</body>

</html>